<template>
	<view class="wrap">
		<view class="" style="display: flex;justify-content: space-around;padding: 8px 8px;">
			<view style="display: flex;align-items: center;" v-for="(item,index) in title" @click="selected(index)"
				:key="index" :class="num==index?'xuan':'wei'">
				<view style="margin-right: 3px;">
					{{item.value}}
				</view>
				<view v-if="num==index">
					<up-icon name="arrow-up" color="#FF8E5A"></up-icon>
				</view>
				<view v-else>
					<up-icon name="arrow-down"></up-icon>
				</view>
			</view>
		</view>
		<view style="background-color: #f2f2f2;height: 2px;width: 100%;"></view>
		<view v-if="num!==null"
			style="position: absolute;width: 100vw;height: 100vh;z-index: 90;background-color: rgba(0,0,0, 0.5);">
			<view v-if="num==0">

			</view>
			<view v-if="num==1">
				<view style="padding: 0 20px 20px;background-color: #FFFFFF;">
					<view style="color: #333333;font-size: 16px;padding: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="radio1" :localdata="sex1"
									selectedColor='#FF8E5A' @change="change"></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<view style="color: #333333;font-size: 16px;margin: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="radio2" :localdata="sex2"
									selectedColor='#FF8E5A' @change="change"></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<view style="margin-top: 150px;display: flex;">
						<view style="color: #999999;margin-right: 10px;">
							已选
						</view>
						<view v-show="radio1!==null" style="margin-right: 10px;">
							<view class="housetypestyle">
								<view style="margin-right: 5px;">
									{{radio1}}
								</view>
								<view @click="shutoff1" style="display: flex;align-items: center;">
									<up-icon name="close" size="12px"></up-icon>
								</view>
							</view>
						</view>
						<view v-show="radio2!==null">
							<view class="housetypestyle">
								<view style="margin-right: 5px;">
									{{radio2}}
								</view>
								<view @click="shutoff2" style="display: flex;align-items: center;">
									<up-icon name="close" size="12px"></up-icon>
								</view>
							</view>
						</view>
					</view>
					<button @click="housetype"
						style="background-color: #FF8E5A;color: #FFFFFF;height: 35px;line-height: 35px;margin-top: 10px;">确定</button>
				</view>
			</view>
			<view v-if="num==2">
				<view style="padding: 0 20px 20px;background-color: #FFFFFF;">
					<view v-for="(item,index) in rental" :key="index" style="text-align: center;">
						<view style="padding-top: 10px;font-size: 14px;" @click="rent(item.value,item.title)">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="num==3">
				<view style="padding: 0 20px 20px;background-color: #FFFFFF;">
					<view v-for="(item,index) in leaseTerm" :key="index" style="text-align: center;">
						<view style="padding-top: 10px;font-size: 14px;" @click="tenancy(item.value,item.title)">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="num==4">
				<view style="padding: 0 20px 20px;background-color: #FFFFFF;">
					<view style="color: #333333;font-size: 16px;padding: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="filter1" :localdata="filtersex1"
									selectedColor='#FF8E5A'></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<view style="color: #333333;font-size: 16px;margin: 4px 0;">
						租房类型
					</view>
					<view class="">
						<uni-section title="更多样式 - tag" subTitle="使用mode=tag属性使用标签样式" type="line">
							<view class="uni-px-5">
								<uni-data-checkbox mode="button" v-model="filter2" :localdata="filtersex2"
									selectedColor='#FF8E5A'></uni-data-checkbox>
							</view>
						</uni-section>
					</view>
					<view style="margin-top: 150px;display: flex;">
						<view style="color: #999999;margin-right: 10px;">
							已选
						</view>
						<view v-show="filter1!==null" style="margin-right: 10px;">
							<view class="housetypestyle">
								<view style="margin-right: 5px;">
									{{filter1}}
								</view>
								<view @click="filtershutoff1" style="display: flex;align-items: center;">
									<up-icon name="close" size="12px"></up-icon>
								</view>
							</view>
						</view>
						<view v-show="filter2!==null">
							<view class="housetypestyle">
								<view style="margin-right: 5px;">
									{{filter2}}
								</view>
								<view @click="filtershutoff2" style="display: flex;align-items: center;">
									<up-icon name="close" size="12px"></up-icon>
								</view>
							</view>
						</view>
					</view>
					<button @click="housetype"
						style="background-color: #FF8E5A;color: #FFFFFF;height: 35px;line-height: 35px;margin-top: 10px;">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const emit = defineEmits(['fn1', 'fn2', 'fn3', 'fn4'])
	const num = ref(null)
	const title = reactive([{
		value: '区域',
	}, {
		value: '户型',
	}, {
		value: '租金',
	}, {
		value: '租期',
	}, {
		value: '排序',
	}])
	const selected = (index) => {
		if (num.value == index) {
			num.value = null
		} else {
			uni.pageScrollTo({
				scrollTop: 300,
				duration: 0
			});
			num.value = index
			console.log(num.value, 888)
		}
	}
	// 筛选
	const filter1 = ref(null)
	const filtersex1 = reactive([{
		text: '入住保洁',
		value: '入住保洁'
	}, {
		text: '租住保险',
		value: '租住保险'
	}])
	const filter2 = ref(null)
	const filtersex2 = reactive([{
		text: '简装',
		value: '简装'
	}, {
		text: '精装',
		value: '精装'
	}, {
		text: '阳台',
		value: '阳台'
	}, {
		text: '押一付一',
		value: '押一付一'
	}])
	const filtershutoff1 = () => {
		console.log(888)
		filter1.value = null
	}
	const filtershutoff2 = () => {
		console.log(888)
		filter2.value = null
	}
	//租期
	const leaseTerm = ref([{
		'value': "不限",
		'title': null
	}, {
		'value': "一个月",
		'title': 1
	}, {
		'value': "三个月",
		'title': 3
	}, {
		'value': "六个月",
		'title': 6
	}, {
		'value': "一年",
		'title': 12
	}, {
		'value': "两年",
		'title': 24
	}])
	const tenancy = (value, title) => {
		num.value = null
		emit('fn4', {
			'tenancy1': value,
			'tenancy2': title
		})
	}
	// 租金
	const rental = ref([{
		'value': "不限",
		'title': 0
	}, {
		'value': "≤1000",
		'title': 1
	}, {
		'value': "1000-1500",
		'title': 3
	}, {
		'value': "1500-2000",
		'title': 3
	}, {
		'value': "2000-3000",
		'title': 3
	}, {
		'value': "3000-5000",
		'title': 3
	}, {
		'value': "≥5000",
		'title': 4
	}])
	const rent = (value, title) => {
		num.value = null
		emit('fn3', {
			'rent1': value,
			'rent2': title
		})
		console.log(value, title)
	}
	// 户型
	const radio1 = ref(null)
	const sex1 = reactive([{
		text: '不限',
		value: '不限'
	}, {
		text: '整租',
		value: '整租'
	}, {
		text: '合租',
		value: '合租'
	}])
	const radio2 = ref(null)
	const sex2 = reactive([{
		text: '不限',
		value: '不限'
	}, {
		text: '一室',
		value: '一室'
	}, {
		text: '两室',
		value: '两室'
	}, {
		text: '三室',
		value: '三室'
	}, {
		text: '四室',
		value: '四室'
	}, {
		text: '五室及以上',
		value: '五室及以上'
	}])
	const housetype = () => {
		console.log(radio1.value)
		emit('fn2', {
			'radio1': radio1.value,
			'radio2': radio2.value
		})
		num.value = null
	}
	const shutoff1 = () => {
		console.log(888)
		radio1.value = null
	}
	const shutoff2 = () => {
		console.log(888)
		radio2.value = null
	}
	// 以上为户型
</script>


<style lang="scss" scoped>
	.wrap {
		background-color: #ffffff;
		// padding: 4px 0;
		font-size: 14px;
		// position: re;
	}

	.xuan {
		color: #FF8E5A;
	}

	.wei {}

	.housetypestyle {
		border: #999999 solid 1px;
		border-radius: 10px;
		color: #666666;
		padding: 2px 6px;
		font-size: 12px;
		display: flex;
		align-items: center;
	}
</style>